<template>
	<!-- 图表显示 -->

	<div style="width: 100%;">
		<Header></Header>

		<div style="width: 1000px;margin: auto;margin-top: 30px;">
			<el-button type="primary" @click="getCar()">查看商品售卖占比情况</el-button>
			<el-button type="primary" @click="getInfo()">查看类别售卖情况</el-button>
			<div id="chartmain" style="width: 800px; height: 600px;margin: 0px auto;"></div>
		</div>
	</div>
</template>

<script>
	import Axios from 'axios' //axios模块
	import * as echarts from 'echarts'
	import {
		ElMessage
	} from 'element-plus' //element-plus模块
	import router from "../route/index.js" //路由模块
	import Header from './Header'
	export default { //js中 es6语法，模块 导出
		name: 'Login',
		components: {
			Header
		},
		data() {
			return {
				user: {},
				info: []
			}
		},

		mounted() {
			// this.drawLine();
		},
		methods: {
			getCar() {
				Axios.post('/shopmng/yuyue/selectCar').then(res => {
					this.info = res.data;
					this.drawLine();
				})
			},
			getInfo() {
				Axios.post('/shopmng/yuyue/selectInfo').then(res => {
					this.info = res.data;
					this.drawLine();
				})
			},
			drawLine() {
				var option = {
					title: {
						text: 'ECharts 数据统计',
						left: 'right',
					},
					series: [{
						name: '访问量',
						type: 'pie', //饼状图
						radius: '80%', //圆的半径。也就是圆的大小
						data: []
					}],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				};
				//初始化echarts实例
				var myChart = echarts.init(document.getElementById('chartmain'));
				option.series[0].data = this.info
				//使用制定的配置项和数据显示图表
				myChart.setOption(option);
			}
		}
	}
</script>

<style>
</style>
